<template>
    <div class="videoplay clearfix">
        <div class="video">
            <div class="header">
                <h2 class="title">{{ videoInfo.title }}</h2>
                <div class="control">
                    <button @click="isAutoplay=!isAutoplay" :class="{'active':isAutoplay}">自动播放</button>
                    <button @click="isLoop=!isLoop" :class="{'active':isLoop}">循环播放</button>
                </div>
                <ul>
                    <li><span class="author">{{ videoInfo.author }}</span></li>
                    <li><span class="pubtime">{{ videoInfo.pubTime }}</span></li>
                </ul>
            </div>
            <video
                controls
                :autoplay="isAutoplay"
                :loop="isLoop"
                :src="videoInfo.videoSrc"
                :poster="videoInfo.posterSrc"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import {useVideoStore} from '@/stores'
import {computed, onMounted, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import {Video, VideoStatus} from '@/types'

const route = useRoute()
const store = useVideoStore()

const id = Number(route.params.id)
const videoInfo = computed<Video>(() => store.videoInfo)
const videoStatus: VideoStatus = JSON.parse(<string>localStorage.getItem('videoStatus')) || {}
const isAutoplay = ref<boolean>(videoStatus.isAutoPlay || false)
const isLoop = ref<boolean>(videoStatus.isLoop || false)

onMounted(() => {
    store.getVideoInfo(id)
    saveHistory()
})

const saveHistory = () => {
    const historyList: number[] = JSON.parse(<string>localStorage.getItem('historyList')) || []
    const index = historyList.indexOf(id)
    if (index === -1) {
        historyList.unshift(id)
    } else {
        historyList.splice(index, 1)
        historyList.unshift(id)
    }
    localStorage.setItem('historyList', JSON.stringify(historyList))
}

watch([isAutoplay, isLoop], ([newIsAuto, newIsLoop]) => {
    videoStatus['isAutoPlay'] = newIsAuto
    videoStatus['isLoop'] = newIsLoop
    localStorage.setItem('videoStatus', JSON.stringify(videoStatus))
})
</script>

<style lang="less" scoped>
.videoplay {
    margin-top: 40px;
    display: flex;
    justify-content: center;

    .video {
        box-sizing: border-box;
        height: calc(100vh - 20px);
        background-color: rgba(255, 255, 255, .4);
        padding: 5px;
        margin: 10px 0;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px 5px 0 0;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.44);
        display: flex;
        flex-flow: column;
        justify-content: center;

        .header {
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                color: rgb(135 14 14 / 88%);
                font-size: 30px;
                font-weight: bold;
                margin-left: 10px;
            }

            .control {
                height: 25px;
                width: 150px;
                display: flex;
                justify-content: space-between;

                button {
                    border: none;
                    background-color: #a6d5ef89;
                    border-radius: 5px;
                }

                .active {
                    color: #ffffffa3;
                    background-color: rgb(126 40 40 / 71%);
                }
            }

            ul {
                display: flex;

                li {
                    margin-right: 40px;

                    &:last-child {
                        margin-right: 10px;
                    }

                    span {
                        font-size: 20px;
                        color: #0a2454e3;
                        float: right;
                    }
                }

            }
        }

        video {
            height: calc(100vh - 72px);
            max-width: 100%;
            aspect-ratio: 16/9;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
            margin-bottom: 10px;
        }
    }
}
</style>